<!--
 作者：ex_wangshuai
 日期：2016-10-08
 功能：观星台路由入口，主tab（首页，掌大局第一个页面，知己比首页，我）
 参数：
 事件：dispatch派发事件响应（changeLoadingStatus，indusFirstPage），包括loading显示和掌大局第一个页面跳转
-->
<template>
  <div class="gxt">
    <!--路由入口-->
    <router-view></router-view>
    <ul v-show="$route.path != '/index'" class="tab display-flex">
      <li v-for="tab in tabs" track-by="id" class="flex1">
        <!--点击跳转路由-->
        <a v-link="{path: tab.url}" :class="['dis-block', {'active':($route.name).indexOf(tab.routeName)>-1}]" data-page="tab.url">
          <div class="icon-wrap">
            <img :src="(($route.name).indexOf(tab.routeName)>-1) ?  tab.highLightIcon: tab.normalIcon">
          </div>
          <p>{{tab.name}}</p>
        </a>
      </li>
    </ul>
    <loading :show="showLoading"></loading>
  </div>
</template>

<script>
/*eslint-disable*/
  // rem屏幕适配
  (function (doc, win) {
    var docEl = doc.documentElement
    var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
    var recalc = function () {
      var clientWidth = docEl.clientWidth
      if (!clientWidth) {
        return
      }
      if (clientWidth > 540) {
//        docEl.style.fontSize = '72px'
        docEl.style.cssText += 'font-size: 72px !important;'
      } else {
//        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'
        docEl.style.cssText += 'font-size: ' + (100 * (clientWidth / 750)) + 'px !important;'
      }
    }
    if (!doc.addEventListener) {
      return
    }
    win.addEventListener(resizeEvt, recalc, false)
    doc.addEventListener('DOMContentLoaded', recalc, false)
  })(document, window)

  var windowInnerHeight = window.innerHeight
//  document.getElementsByName('viewport')[0].content = 'width=device-width,height=' + windowInnerHeight + ',initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no'

  import Loading from 'vux/dist/components/Loading'
  export default{
    components: {
      Loading
    },
    data: function () {
      var data = {}
      data.tabs = [
        {
          'id': 0,
          'name': '首页',
          'highLightIcon': './static/img/navbar/account-highlight@3x.png',
          'normalIcon': './static/img/navbar/account-normal@3x.png',
          'url': '/home',
          'routeName': '/home'
        },
        // {
        //   'id': 1,
        //   'name': '掌大局',
        //   'highLightIcon': './static/img/navbar/industry-highlight@3x.png',
        //   'normalIcon': './static/img/navbar/industry-normal@3x.png',
        //   'url': '/industry/industryOviews',
        //   'routeName': '/industry'
        // },
        {
          'id': 1,
          'name': '掌大局',
          'highLightIcon': './static/img/navbar/industry-highlight@3x.png',
          'normalIcon': './static/img/navbar/industry-normal@3x.png',
          'url': '/industry/industryHome',
          'routeName': '/industry'
        },
        {
          'id': 2,
          'name': '知己彼',
          'highLightIcon': './static/img/navbar/peer-highlight@3x.png',
          'normalIcon': './static/img/navbar/peer-normal@3x.png',
          'url': '/peer',
          'routeName': '/peer'
        },
        {
          'id': 3,
          'name': '我',
          'highLightIcon': './static/img/navbar/home-highlight@3x.png',
          'normalIcon': './static/img/navbar/home-normal@3x.png',
          'url': '/account',
          'routeName': '/account'
        }
      ]
      data.showLoading = false
      return data
    },
//    dispatch事件响应
    events: {
//      loading显示
      'changeLoadingStatus': function (status) {
        this.showLoading = status
      },
//      掌大局第一个页面跳转
      'indusFirstPage': function (mkey) {
        this.tabs[1].url =  '/industry/' + mkey
      }
    },
    ready: function () {
    }
  }
</script>

<style scoped lang="scss">
  .gxt{
    /*width: 100%;*/
    /*position: fixed;*/
    /*top: 0;*/
  }
  ul.tab {
    position: fixed;
    bottom: 0;
    left: 0;
    margin: 0;
    width: 100%;
    height: 7.4vh;
    border-top: 1px solid rgba(0, 0, 0, .1);
    box-sizing: border-box;
    background: #fff;
    z-index: 100;
  }

  ul.tab li {
    padding-top: .1rem;
    display: flex;
    text-align: center;
    align-items: center;
    list-style: none;
  }

  ul.tab li a {
    display: block;
    width: 100%;
    font-size: 1.65vh;
    text-decoration: none;
    color: #999;

  .icon-wrap {
    height: 3.15vh;
  }

  p {
    margin-top: 0.04rem;
  }

  }

  .active {
    color: #4a90e2 !important;
  }
</style>
<style lang="scss">
  .item-data{
    height: 4rem;
    line-height: 4rem;
    text-align: center;
    font-size: 0.5rem;
  }
  .no-data{
    height: 4rem;
    line-height: 4rem;
    text-align: center;
    font-size: 0.5rem;
    display: none;
  }
  /* 条件框样式 */
  .filter-condition{
    margin-right: 0.2rem;
    margin-top: 1.1vh;
    font-size: 0.24rem;
    float: left;
    color: #4A90E2;
    padding: 0.35vh 1.2vh;
    box-sizing: border-box;
    border: 1px solid #4A90E2;
    background: #FAFCFF;
    border-radius: 3px;
    max-width: 85%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  /*退出弹框样式*/
  .weui_dialog {
    width: 65% !important;
  }
  .weui_dialog_ft {
    margin-top: 0 !important;
  }
  .weui_dialog_hd {
    padding: 0.6rem 0 !important;
  }
  .primary{
    color: #4a90e2 !important;
  }
  .weui_toast{
    top: 42% !important;
  }
  /*echarts提示框*/
  .chartContainer div:nth-child(2){
    z-index: 10 !important;
  }
  /*swiper翻页提示按钮*/
  .swiper-container-horizontal>.swiper-pagination-bullets{
    bottom: 1% !important;
  }
  /*返回按钮样式*/
  .leftButton {
    width: .5rem;
    height: 100%;
    background: url('../../static/img/btn-back.png') no-repeat center right;
    background-size: 100%;
  }
  .rightButton-onlytext{
    display: block;
    padding-top: .2rem;
    padding-right: .2rem;
    font-size: .3rem;
  }
  /* input 聚焦时样式 */
  body#inputFocus{
    /*头部*/
    .toolbar{
      height: .88rem;

      .title{
        height: .88rem;
        line-height: .88rem;
      }
    }

    /*内容距顶部距离*/
    .overall-comparison{
      margin-top: 1.05rem;
      margin-bottom: 0;
    }

    /*搜索框*/
    .search-wrap{
      height: .68rem !important;
      line-height: .68rem !important;
    }
    .product-list,.brands{
      top: 3rem !important;
    }
    .tab{
      display: none;
    }

    .top-wrap,.select-brand{
      position: fixed;
      top: .85rem !important;
      left: 0;
      right: 0;
      bottom: 0;
      background: #FFF;
      z-index: 12;
    }
    .filter-message-box{
      background: #FFF;
    }
    .product-list{
      z-index: 13;
    }
  }
  /*tooBar样式*/
  .rightButton{
    height: 100%;
    font-size: 0.22rem;
  }
  .filterButton{
    width: .7rem;
    float: left;
    text-align: center;
    height: 100%;
  }
  .menuButton{
    width: .7rem;
    float: left;
    text-align: center;
    height: 100%;
  }
  .menuIcon{
    display: block;
    height: 60%;
    background: url('../../static/img/list.png') no-repeat center 65%;
    background-size: 0.384rem 0.2688rem;
  }
  .filterIcon{
    display: block;
    height: 60%;
    background: url('../../static/img/filterIcon.png') no-repeat center 65%;
    background-size: 0.3264rem 0.2688rem;
  }
  .filterOver{
    height: 100%;
    line-height: 6.6vh;
    display: block;
    width: 1rem;
    font-size: 0.28rem;
    text-align: center;
  }
  .shareButton{
    width: .7rem;
    float: left;
    text-align: center;
    height: .7rem;
  }
  .shareIcon{
    display: block;
    height: 100%;
    background: url('../../static/img/fxhy@3x.png') no-repeat center 65%;
    background-size: 0.584rem 0.584rem;
  }
  .dp-header .dp-item {
    color: #3289ff !important;
  }
  /* 必需 */
  .expand-transition {
    transition: left .2s ease-in;
    left: 20%;
  }

  /* .expand-enter 定义进入的开始状态 */
  /* .expand-leave 定义离开的结束状态 */
  .expand-enter, .expand-leave {
    left: 100%;
  }

  /* 必需 */
  .expand2-transition {
    transition: opacity .2s ease-in;
    opacity: 0.3;
  }
  /* .expand-enter 定义进入的开始状态 */
  /* .expand-leave 定义离开的结束状态 */
  .expand2-enter, .expand2-leave {
    opacity: 0;
  }
  /*loading*/
  .loading-box {
    width: 100%;
    height: 92.6vh;
    background: rgba(255, 255, 255, 0.6);
    position: fixed;
    top: 0;
    z-index: 190;
  }

  .loading {
    width: 3rem;
    height: 3rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 501;
  }
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed,
  figure, figcaption, footer, header, hgroup,
  main, menu, nav, output, ruby, section, summary,
  time, mark, audio, video, button, input, select {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
  }

  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure,
  footer, header, hgroup, main, menu, nav, section {
    display: block;
  }

  /*@font-face {*/
  /*font-family: 'PingFangSC-Regular';*/
  /*src: url('../../static/font/pingfangSC.otf');*/
  /*font-weight: normal;*/
  /*font-style: normal;*/
  /*}*/

  body {
    margin: 0 auto;
    line-height: 1.43 !important;
    color: #999;
    /*font-family: PingFangSC-Regular, "微软雅黑", "Microsoft Yahei", "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif !important;*/
    font-family: "微软雅黑", "Microsoft Yahei", "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif !important;
    overflow-x: hidden;
    font-size: 14px;
    max-width: 540px;
    background: #FFF;
    -webkit-user-select:none;
    user-select:none;
  }

  table {
    border-collapse: separate;
    border-spacing: 0px;
  }

  ol, ul {
    list-style: none;
  }

  [v-cloak] {
    display: none;
  }

  .posr {
    position: relative;
  }

  .posf {
    position: fixed;
  }

  .posa {
    position: absolute;
  }

  .vertical-middle {
    vertical-align: middle;
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }

  .float-left {
    float: left;
  }

  .float-right {
    float: right;
  }

  .clearfix:before, .clearfix:after {
    display: table;
    content: " ";
  }

  .clearfix:after {
    clear: both;
  }

  .item-center {
    align-items: center;
    -webkit-align-items: center;
  }

  .dis-in-b {
    display: inline-block;
  }

  .dis-block {
    display: block;
  }

  .dis-none {
    display: none;
  }

  .display-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .flex1 {
    -webkit-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }

  .flex2 {
    -webkit-box-flex: 2;
    -webkit-flex: 2;
    flex: 2;
  }

  .flex3 {
    -webkit-box-flex: 3;
    -webkit-flex: 3;
    flex: 3;
  }

  .flex4 {
    -webkit-box-flex: 4;
    -webkit-flex: 4;
    flex: 4;
  }

  .flex8 {
    -webkit-box-flex: 8;
    -webkit-flex: 8;
    flex: 8;
  }

  .flex16 {
    -webkit-box-flex: 16;
    -webkit-flex: 16;
    flex: 16;
  }

  .flex23 {
    -webkit-box-flex: 23;
    -webkit-flex: 23;
    flex: 23;
  }

  .align-items {
    align-items: center;
    -webkit-align-items: center;
  }

  .justify-content {
    justify-content: center;
    -webkit-justify-content: center;
  }

  .flex-wrap {
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
  }

  .pt30 {
    padding-top: .3rem;
  }

  .pl30{
    padding-left: .3rem;
  }

  .pl50{
    padding-left: .5rem;
  }

  .pl60{
    padding-left: .6rem;
  }

  .pl70{
    padding-left: .7rem;
  }

  .pl80{
    padding-left: .8rem;
  }

  .pl90{
    padding-left: .9rem;
  }


  .pl100{
    padding-left: 1rem;
  }

  .pt60 {
    padding-top: .6rem;
  }

  .pt70 {
    padding-top: .7rem;
  }

  .pl20 {
    padding-left: .2rem;
  }

  .mt10 {
    margin-top: .1rem;
  }

  .mb10 {
    margin-bottom: .1rem;
  }

  .ml10 {
    margin-left: .1rem;
  }

  .mr10 {
    margin-right: .1rem;
  }

  .mt15 {
    margin-top: .15rem;
  }

  .mb15 {
    margin-bottom: .15rem;
  }

  .ml15 {
    margin-left: .15rem;
  }

  .mr15 {
    margin-right: .15rem;
  }

  .mt20 {
    margin-top: .2rem;
  }

  .mb20 {
    margin-bottom: .2rem;
  }

  .mb50 {
    margin-bottom: .5rem;
  }

  .mb100 {
    margin-bottom: 1rem;
  }

  .mt100 {
    margin-top: 1rem
  }

  .ml20 {
    margin-left: .2rem;
  }

  .mr20 {
    margin-right: .3rem;
  }

  .mt30 {
    margin-top: .3rem;
  }

  .mb30 {
    margin-bottom: .3rem;
  }

  .ml30 {
    margin-left: .3rem;
  }

  .mr30 {
    margin-right: .3rem;
  }

  .mt40 {
    margin-top: .4rem;
  }

  .mb40 {
    margin-bottom: .4rem;
  }

  .ml40 {
    margin-left: .4rem;
  }

  .mr40 {
    margin-right: .4rem;
  }

  .pl10 {
    padding-left: .1rem;
  }

  .pr10 {
    padding-right: .1rem;
  }

  .fs12 {
    font-size: .12rem;
  }

  .fs14 {
    font-size: .14rem;
  }

  .fs16 {
    font-size: .16rem;
  }

  .fs18 {
    font-size: .18rem;
  }

  .fs20 {
    font-size: .2rem;
  }

  .fs22 {
    font-size: .22rem;
  }

  .fs24 {
    font-size: .24rem;
  }

  .fs26 {
    font-size: .26rem;
  }

  .fs28 {
    font-size: .28rem;
  }

  .fs30 {
    font-size: .3rem;
  }

  .fs32 {
    font-size: .32rem;
  }

  .fs34 {
    font-size: .34rem;
  }

  .fs36 {
    font-size: .36rem;
  }

  .fs38 {
    font-size: .38rem;
  }

  .fs40 {
    font-size: .4rem;
  }

  a {
    color: #333;
    text-decoration: none;
  }

  img {
    max-width: 100%;
    max-height: 100%;
  }

  .w100 {
    width: 100%;
  }

  .weui_mask_transparent{
    height: 90% !important;
  }

</style>
